<template>
  <div>
    <el-date-picker v-model="listQuery.startTime" class="filter-item" :disabled="!isSelectTime"
                    :editable="false" :clearable="true" :placeholder="$t('Start_time')"  format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"></el-date-picker>

    <el-date-picker v-model="listQuery.endTime" class="filter-item" :disabled="!isSelectTime" :editable="false"
                    :clearable="true" :placeholder="$t('End_time')"  format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"></el-date-picker>

    <el-select v-model="listQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">
      <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
    </el-select>

    <el-button class="filter-item" type="primary" icon="el-icon-search" v-permission="['GET /admin/p/coupon_statistic_index']" @click="handleFilter">{{$t('Search')}}</el-button>
    <el-card>
      <el-descriptions class="margin-top" v-model="totalData" :title='$t("概况")' direction="vertical" :column="12"  border>
        <el-descriptions-item :label='$t("发放数量")'>{{totalData.total}}</el-descriptions-item>
        <el-descriptions-item :label='$t("已领取占比")'>{{totalData.recieveNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("剩余占比")'>{{totalData.surplusNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("已使用占比")'> {{totalData.usedNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("已过期占比")'>{{totalData.expiredNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("使用优惠券订单总额")'>{{totalData.totalOrderPrice}}</el-descriptions-item>
        <el-descriptions-item :label='$t("总优惠金额")'>{{totalData.totalCouponPrice}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card>
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          prop="couponName"
          :label='$t("优惠券名称")'
          width="180">
        </el-table-column>
        <el-table-column
          prop="total"
          :label='$t("发放数量")'
          width="180">
        </el-table-column>
        <el-table-column
          prop="recieveNum"
          :label='$t("已领取占比")'
          width="180">
        </el-table-column>
        <el-table-column
          prop="surplusNum"
          :label='$t("剩余占比")'
          width="180">
        </el-table-column>
        <el-table-column
          prop="usedNum"
          :label='$t("已使用占比")'
          width="180">
        </el-table-column>
        <el-table-column
          prop="expiredNum"
          :label='$t("已过期占比")'
          width="180">
        </el-table-column>
        <el-table-column
          prop="totalOrderPrice"
          :label='$t("使用优惠券订单总额")'
          width="180">
        </el-table-column>
        <el-table-column
          prop="totalCouponPrice"
          :label='$t("总优惠券金额")'
          width="180">
        </el-table-column>


        <el-table-column align="center" :label="$t('Operate')" width="400" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button v-permission="['GET /admin/p/coupon_statistic_detail']" type="primary" plain1 size="mini" @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getTypeList" />

    </el-card>
  </div>

</template>

<script>
import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
import { statistic, statisticByType } from '../../api/lumiereSubscribeStatistic'
import { listLocationRegion, listSubRegion } from '../../api/region'
import { allForPerm } from '../../api/shop'
import Pagination from '@/components/Pagination'
import BackToTop from '@/components/BackToTop'
import { couponStatistic, typeStatistic, typeUserStatistic } from '../../api/coupon'

export default {
  name: 'couponStatistic',
  components: { ElSelectDropdown, BackToTop, Pagination },
  data() {
    return {
      total: 0,
      locations:[],
      totalData: {
         couponId:undefined,
         total: undefined,
         recieveNum: undefined,
         usedNum: undefined,
         surplusNum: undefined,
        expiredNum: undefined,
        totalOrderPrice: undefined,
        totalCouponPrice:undefined,
      },
      list: [],
      shops:[],
      listQuery: {
        startTime: undefined,
        endTime: undefined,
        shopId: '',
        type: undefined,
        shopName: undefined,
        page:1,
        limit:20
      },
      regionProps: {multiple: true, value: 'id', label: 'nameEn',emitPath:false},
      isSelectTime: true,
      props: {
        value:'id',
        label: 'nameEn',
        children: 'children',
        checkStrictly: true
      },
    }
  },
  methods: {
    getList() {
      let pa = _.clone(this.listQuery);
      couponStatistic(pa).then(response => {
        this.totalData = response.data.data;
      })
    },

    getTypeList(){
      let p = _.clone(this.listQuery);
      typeStatistic(p).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.total
      })
    },

    getFullDate(targetDate) {
      var D, y, m, d;
      if (targetDate) {
        D = new Date(targetDate);
        y = D.getFullYear();
        m = D.getMonth() + 1;
        d = D.getDate();
      } else {
        y = fullYear;
        m = month;
        d = date;
      }
      m = m > 9 ? m : '0' + m;
      d = d > 9 ? d : '0' + d;
      return y + '-' + m + '-' + d;
    },
    getIndex(index) {
      return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
    },
    handleDetail(row) {
      for (let lengthKey in this.shops.length) {
         if(this.listQuery.shopId == this.shops[lengthKey].id){
           this.listQuery.shopName = this.shops[lengthKey].name
         }
      }
      this.$router.push({
        path: '/coupon/typeStatisticDetail',
        query: {
          totalData: row,
          startTime: this.listQuery.startTime,
          endTime: this.listQuery.endTime,
          shopId: this.listQuery.shopId,
          shopName: this.listQuery.shopName
        }
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
      this.getTypeList()
    },
    handleItemChange(val) {
      let step = val.length
      let query = {
        id: val[val.length - 1],
        type: 1
      }
      listSubRegion(query).then(response => {
        let result = this.findObject(this.countrys, val)
        // console.log(result)
        response.data.data.list.forEach(child => {
          if (step <= 1) {
            result.children.push(this._.defaults(child, { children: [] }))
          } else {
            result.children.push(child)
          }
        })
      })
    },
    getLocations() {
      listLocationRegion().then(response => {
        this.locations = response.data.data.list
        if (this.listQuery.regionId && this.listQuery.regionId.length > 0) {
          let p = [];
          this.listQuery.regionId.forEach(id => {
            this.locations.forEach(region => {
              if (region.children && region.children.length > 0) {
                region.children.forEach(item => {
                  if (item.children && item.children.length > 0) {
                    item.children.forEach(sub => {
                      if (sub.id == id) {
                        let tmp = sub.id;
                        p.push(tmp)
                      }
                    })
                  }
                })
              }
            })
          })
        }
      })

    },
  },
  created() {
    this.getLocations();
    this.getList();
    this.getTypeList();
    allForPerm().then(response=>{
      this.shops = response.data.data.list
    })
  }
}
</script>

<style scoped>

</style>
